<template>
  <div>
    <el-container>
      <el-aside width="250px">
         <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
         router
     
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
       <el-menu-item index="1" >
        <i class="el-icon-document"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>数据管理</span>
        </template>
        <el-menu-item-group>
         
          <el-menu-item index="./about">用户列表</el-menu-item>
          <el-menu-item index="./gouwu" >商家列表</el-menu-item>
        </el-menu-item-group>
      
      </el-submenu>
      
      <el-menu-item index="3" >
        <i class="el-icon-document"></i>
        <span slot="title">添加数据</span>
      </el-menu-item>
     
      <el-menu-item index="4" >
        <i class="el-icon-document"></i>
        <span slot="title">图标</span>
      </el-menu-item>

       <el-menu-item index="5" >
        <i class="el-icon-document"></i>
        <span slot="title">编辑</span>
      </el-menu-item>

       <el-menu-item index="6" >
        <i class="el-icon-document"></i>
        <span slot="title">设置</span>
      </el-menu-item>

       <el-menu-item index="7" >
        <i class="el-icon-document"></i>
        <span slot="title">说明</span>
      </el-menu-item>
    </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style scoped lang="scss">
ul{
  height: 900px;
}
.el-header {
  background-color: #F1F5FB;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0px;
 
}

.el-aside {
  background-color: #324257;
  color: #333;
  text-align: center;
  line-height: 900px;
  height: 900px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-breadcrumb {
  line-height: 60px;
  font-size: 18px;
  margin-left: 30px;
}
</style>
